Frontend Performance API Navigation: பக்க ஏற்றுதல் அளவீடுகளை சேகரிப்பதில் தேர்ச்சி பெறுதல்

இன்றைய டிஜிட்டல் உலகில், இணையதளத்தின் செயல்திறன் மிக முக்கியமானது. மெதுவாக ஏற்றப்படும் ஒரு இணையதளம் பயனர்களை விரக்தியடையச் செய்து, அவர்கள் வாங்கும் எண்ணத்தைக் கைவிட வைத்து, இறுதியில் வருவாய் இழப்புக்கு வழிவகுக்கும். உங்கள் பயனர்கள் உலகில் எங்கிருந்தாலும், ஒரு நேர்மறையான பயனர் அனுபவத்தை வழங்க உங்கள் முகப்பு செயல்திறனை மேம்படுத்துவது மிகவும் அவசியம். Frontend Performance API, பக்க ஏற்றுதல் செயல்திறனின் பல்வேறு அம்சங்களை அளவிடுவதற்கும் பகுப்பாய்வு செய்வதற்கும் சக்திவாய்ந்த கருவிகளை வழங்குகிறது. இந்த விரிவான வழிகாட்டி, Navigation Timing API மற்றும் பிற தொடர்புடைய செயல்திறன் இடைமுகங்களைப் பயன்படுத்தி முக்கிய பக்க ஏற்றுதல் அளவீடுகளைச் சேகரித்து புரிந்துகொள்ள உங்களுக்கு வழிகாட்டும். இதன் மூலம், நீங்கள் தடைகளைக் கண்டறிந்து, உங்கள் இணையதளத்தின் வேகத்தையும் பதிலளிக்கும் தன்மையையும் உலகளாவிய பார்வையாளர்களுக்காக மேம்படுத்த முடியும்.

பக்க ஏற்றுதல் அளவீடுகளின் முக்கியத்துவத்தைப் புரிந்துகொள்ளுதல்

பக்க ஏற்றுதல் அளவீடுகள், உங்கள் இணையதளம் எவ்வளவு விரைவாக ஏற்றப்பட்டு பயனர்களுக்கு ஊடாடத் தயாராகிறது என்பது குறித்த மதிப்புமிக்க நுண்ணறிவுகளை வழங்குகின்றன. இந்த அளவீடுகள் பல காரணங்களுக்காக முக்கியமானவை:

• பயனர் அனுபவம்: வேகமாக ஏற்றப்படும் ஒரு இணையதளம் மென்மையான மற்றும் சுவாரஸ்யமான பயனர் அனுபவத்தை வழங்குகிறது, இது அதிக ஈடுபாட்டிற்கும் திருப்திக்கும் வழிவகுக்கிறது. டோக்கியோவில் உள்ள ஒரு பயனர் உங்கள் இ-காமர்ஸ் தளத்தை அணுக முயற்சிப்பதாக கற்பனை செய்து பாருங்கள்; மெதுவாக ஏற்றப்படும் அனுபவம் அவர்கள் வாங்குவதை கைவிடச் செய்யும்.
• SEO தரவரிசை: கூகிள் போன்ற தேடுபொறிகள் பக்க வேகத்தை ஒரு தரவரிசை காரணியாகக் கருதுகின்றன. உங்கள் இணையதளத்தின் செயல்திறனை மேம்படுத்துவது உங்கள் தேடுபொறி தெரிவுநிலையை மேம்படுத்தும்.
• மாற்று விகிதங்கள் (Conversion Rates): பக்க ஏற்றுதல் நேரத்திற்கும் மாற்று விகிதங்களுக்கும் நேரடி தொடர்பு இருப்பதாக ஆய்வுகள் காட்டுகின்றன. வேகமாக ஏற்றப்படும் பக்கங்கள் பெரும்பாலும் அதிக மாற்று விகிதங்களுக்கு வழிவகுக்கின்றன, குறிப்பாக மெதுவான இணைய வேகம் கொண்ட பிராந்தியங்களில்.
• மொபைல் மேம்படுத்தல்: மொபைல் சாதனங்களின் பயன்பாடு அதிகரித்து வருவதால், மொபைல் செயல்திறனுக்காக மேம்படுத்துவது அவசியம். பக்க ஏற்றுதல் நேரங்கள் மொபைல் பயனர் அனுபவத்தை கணிசமாக பாதிக்கலாம், குறிப்பாக குறைந்த அலைவரிசை உள்ள பகுதிகளில். உதாரணமாக, 3G இணைப்புகளை நம்பியிருக்கும் இந்தியாவில் உள்ள பயனர்கள், அதிவேக ஃபைபர் இணைப்புகளைக் கொண்ட பயனர்களை விட வேகமாக ஏற்றப்படும் இணையதளத்தை அதிகம் பாராட்டுவார்கள்.
• உலகளாவிய அணுகல்: ஒரு பயனரின் புவியியல் இருப்பிடம், நெட்வொர்க் நிலைமைகள் மற்றும் சாதனத் திறன்களைப் பொறுத்து செயல்திறன் கணிசமாக மாறுபடும். வெவ்வேறு பிராந்தியங்களிலிருந்து செயல்திறனைக் கண்காணிப்பது, மேம்படுத்தல் தேவைப்படும் பகுதிகளைக் கண்டறிய உதவும்.

Frontend Performance API-ஐ அறிமுகப்படுத்துதல்

Frontend Performance API என்பது வலைப்பக்கங்களுக்கான செயல்திறன் தொடர்பான தரவுகளுக்கான அணுகலை வழங்கும் ஜாவாஸ்கிரிப்ட் இடைமுகங்களின் தொகுப்பாகும். இந்த API, டெவலப்பர்கள் பக்க ஏற்றுதல் நேரம், வளங்கள் ஏற்றுதல் மற்றும் பிற செயல்திறன் பண்புகளின் பல்வேறு அம்சங்களை அளவிட அனுமதிக்கிறது. Navigation Timing API, Frontend Performance API-இன் ஒரு முக்கிய அங்கமாகும், இது பக்க ஏற்றுதல் செயல்முறையின் பல்வேறு நிலைகளைப் பற்றிய விரிவான நேரத் தகவலை வழங்குகிறது.

செயல்திறன் API-ன் முக்கிய கூறுகள்:

• Navigation Timing API: DNS தேடல், TCP இணைப்பு, கோரிக்கை மற்றும் மறுமொழி நேரங்கள் மற்றும் DOM செயலாக்கம் போன்ற பக்க ஏற்றுதல் செயல்முறையின் வெவ்வேறு நிலைகளைப் பற்றிய நேரத் தகவலை வழங்குகிறது.
• Resource Timing API: படங்கள், ஸ்கிரிப்ட்கள் மற்றும் ஸ்டைல்ஷீட்கள் போன்ற பக்கத்தால் ஏற்றப்பட்ட தனிப்பட்ட வளங்களுக்கான நேரத் தகவலை வழங்குகிறது. குறிப்பாக சாதனம் மற்றும் பிராந்தியத்தின் அடிப்படையில் வெவ்வேறு படத் தீர்மானங்களை வழங்கும் போது (எ.கா., சிறந்த சுருக்கத்திற்காக ஆதரிக்கப்படும் உலாவிகளுக்கு WebP படங்களை வழங்குதல்), எந்த சொத்துக்கள் ஏற்றுதல் நேரங்களுக்கு அதிகம் பங்களிக்கின்றன என்பதைப் புரிந்துகொள்ள இது விலைமதிப்பற்றது.
• User Timing API: டெவலப்பர்கள் தனிப்பயன் செயல்திறன் அளவீடுகளை வரையறுக்கவும் மற்றும் செயல்படுத்தும் நேரத்தை அளவிட குறியீட்டில் குறிப்பிட்ட புள்ளிகளைக் குறிக்கவும் அனுமதிக்கிறது.
• Paint Timing API: First Paint (FP) மற்றும் First Contentful Paint (FCP) போன்ற திரையில் உள்ளடக்கத்தை ரெண்டரிங் செய்வது தொடர்பான அளவீடுகளை வழங்குகிறது.
• Largest Contentful Paint (LCP): பக்கம் முதலில் ஏற்றத் தொடங்கிய நேரத்துடன் ஒப்பிடும்போது, வ்யூபோர்ட்டில் தெரியும் மிகப்பெரிய படம் அல்லது உரைத் தொகுதியின் ரெண்டர் நேரத்தைப் புகாரளிக்கிறது. இது கூகிளின் Core Web Vitals-இல் ஒரு முக்கிய அளவீடு ஆகும்.
• First Input Delay (FID): ஒரு பயனர் ஒரு பக்கத்துடன் முதலில் தொடர்பு கொள்ளும் நேரத்திலிருந்து (எ.கா. அவர்கள் ஒரு இணைப்பைக் கிளிக் செய்யும் போது, ஒரு பொத்தானைத் தட்டும்போது அல்லது தனிப்பயன், ஜாவாஸ்கிரிப்ட்-இயங்கும் கட்டுப்பாட்டைப் பயன்படுத்தும்போது) அந்தத் தொடர்புக்கு பதிலளிக்கும் வகையில் உலாவி நிகழ்வு கையாளுதல்களைச் செயலாக்கத் தொடங்கும் நேரம் வரை அளவிடுகிறது.
• Cumulative Layout Shift (CLS): ஒரு பக்கத்தின் முழு ஆயுட்காலத்திலும் ஏற்படும் அனைத்து எதிர்பாராத தளவமைப்பு மாற்றங்களின் மொத்தத் தொகையை அளவிடுகிறது.

Navigation Timing API-ஐப் பயன்படுத்தி பக்க ஏற்றுதல் அளவீடுகளை சேகரித்தல்

Navigation Timing API பக்க ஏற்றுதல் செயல்முறை பற்றிய ஏராளமான தகவல்களை வழங்குகிறது. இந்தத் தரவை அணுக, நீங்கள் ஜாவாஸ்கிரிப்டில் performance.timing பண்பைப் பயன்படுத்தலாம்.

உதாரணம்: நேவிகேஷன் டைமிங் தரவை சேகரித்தல்

நேவிகேஷன் டைமிங் தரவைச் சேகரித்து அதை கன்சோலில் பதிவு செய்வது எப்படி என்பதற்கான ஒரு உதாரணம் இங்கே:

if (window.performance && window.performance.timing) { const timing = window.performance.timing; console.log('Navigation Start:', timing.navigationStart); console.log('Fetch Start:', timing.fetchStart); console.log('Domain Lookup Start:', timing.domainLookupStart); console.log('Domain Lookup End:', timing.domainLookupEnd); console.log('Connect Start:', timing.connectStart); console.log('Connect End:', timing.connectEnd); console.log('Request Start:', timing.requestStart); console.log('Response Start:', timing.responseStart); console.log('Response End:', timing.responseEnd); console.log('DOM Loading:', timing.domLoading); console.log('DOM Interactive:', timing.domInteractive); console.log('DOM Complete:', timing.domComplete); console.log('Load Event Start:', timing.loadEventStart); console.log('Load Event End:', timing.loadEventEnd); }

முக்கியம்: performance.timing பொருள் PerformanceNavigationTiming இடைமுகத்திற்கு ஆதரவாக நீக்கப்பட்டுள்ளது. நவீன உலாவிகளுக்கு பிந்தையதைப் பயன்படுத்துவது பரிந்துரைக்கப்படுகிறது.

PerformanceNavigationTiming-ஐப் பயன்படுத்துதல்

if (window.performance && window.performance.getEntriesByType) { const navigationEntries = performance.getEntriesByType('navigation'); if (navigationEntries && navigationEntries.length > 0) { const navigationEntry = navigationEntries[0]; console.log('Navigation Type:', navigationEntry.type); // e.g., 'navigate', 'reload', 'back_forward' console.log('Navigation Start:', navigationEntry.startTime); console.log('Fetch Start:', navigationEntry.fetchStart); console.log('Domain Lookup Start:', navigationEntry.domainLookupStart); console.log('Domain Lookup End:', navigationEntry.domainLookupEnd); console.log('Connect Start:', navigationEntry.connectStart); console.log('Connect End:', navigationEntry.connectEnd); console.log('Request Start:', navigationEntry.requestStart); console.log('Response Start:', navigationEntry.responseStart); console.log('Response End:', navigationEntry.responseEnd); console.log('DOM Interactive:', navigationEntry.domInteractive); console.log('DOM Complete:', navigationEntry.domComplete); console.log('Load Event Start:', navigationEntry.loadEventStart); console.log('Load Event End:', navigationEntry.loadEventEnd); console.log('Duration:', navigationEntry.duration); // Calculate Time to First Byte (TTFB) const ttfb = navigationEntry.responseStart - navigationEntry.requestStart; console.log('TTFB:', ttfb); // Calculate DOM Load Time const domLoadTime = navigationEntry.domComplete - navigationEntry.domLoading; console.log('DOM Load Time:', domLoadTime); // Calculate Page Load Time const pageLoadTime = navigationEntry.loadEventEnd - navigationEntry.startTime; console.log('Page Load Time:', pageLoadTime); } }

நேவிகேஷன் டைமிங் அளவீடுகளைப் புரிந்துகொள்ளுதல்

Navigation Timing API வழங்கும் சில முக்கிய அளவீடுகளின் விளக்கம் இங்கே:

• navigationStart: ஆவணத்திற்கான நேவிகேஷன் தொடங்கும் நேரம்.
• fetchStart: உலாவி ஆவணத்தைப் பெறத் தொடங்கும் நேரம்.
• domainLookupStart: உலாவி ஆவணத்தின் டொமைனுக்கான DNS தேடலைத் தொடங்கும் நேரம்.
• domainLookupEnd: உலாவி ஆவணத்தின் டொமைனுக்கான DNS தேடலை முடிக்கும் நேரம்.
• connectStart: உலாவி சர்வருடன் இணைப்பை ஏற்படுத்தத் தொடங்கும் நேரம்.
• connectEnd: உலாவி சர்வருடன் இணைப்பை ஏற்படுத்தி முடிக்கும் நேரம். வெவ்வேறு பிராந்தியங்களில் CDN பயன்பாட்டின் தாக்கத்தைக் கவனியுங்கள்; நன்கு கட்டமைக்கப்பட்ட CDN உலகெங்கிலும் உள்ள பயனர்களுக்கு இணைப்பு நேரத்தை கணிசமாகக் குறைக்கும்.
• requestStart: உலாவி சர்வருக்கு கோரிக்கையை அனுப்பத் தொடங்கும் நேரம்.
• responseStart: உலாவி சர்வரிடமிருந்து பதிலான முதல் பைட்டைப் பெறும் நேரம். இது முதல் பைட்டிற்கான நேரத்தை (TTFB) அளவிடுவதற்கான தொடக்கப் புள்ளியாகும்.
• responseEnd: உலாவி சர்வரிடமிருந்து பதிலான கடைசி பைட்டைப் பெறும் நேரம்.
• domLoading: உலாவி HTML ஆவணத்தைப் பாகுபடுத்தத் தொடங்கும் நேரம்.
• domInteractive: உலாவி HTML ஆவணத்தைப் பாகுபடுத்தி முடித்த மற்றும் DOM தயாராக இருக்கும் நேரம். சில வளங்கள் இன்னும் ஏற்றப்பட்டுக் கொண்டிருந்தாலும், பயனர் பக்கத்துடன் தொடர்பு கொள்ளலாம்.
• domComplete: உலாவி HTML ஆவணத்தைப் பாகுபடுத்தி முடித்த மற்றும் அனைத்து வளங்களும் (படங்கள், ஸ்கிரிப்ட்கள், முதலியன) ஏற்றப்பட்டு முடிந்த நேரம்.
• loadEventStart: load நிகழ்வு தொடங்கும் நேரம்.
• loadEventEnd: load நிகழ்வு முடிவடையும் நேரம். இது பெரும்பாலும் பக்கம் முழுமையாக ஏற்றப்பட்ட புள்ளியாகக் கருதப்படுகிறது.
• duration: நேவிகேஷனுக்கு எடுக்கப்பட்ட மொத்த நேரம். PerformanceNavigationTiming-உடன் கிடைக்கிறது.

மேம்படுத்தலுக்காக பக்க ஏற்றுதல் அளவீடுகளை பகுப்பாய்வு செய்தல்

நீங்கள் பக்க ஏற்றுதல் அளவீடுகளைச் சேகரித்தவுடன், அடுத்த கட்டம் அவற்றை பகுப்பாய்வு செய்து மேம்படுத்துவதற்கான பகுதிகளைக் கண்டறிவதாகும். இங்கே சில முக்கிய உத்திகள்:

1. இடையூறுகளைக் கண்டறிதல்

நேவிகேஷன் டைமிங் தரவை ஆராய்வதன் மூலம், பக்க ஏற்றுதல் செயல்முறையின் எந்த நிலைகள் அதிக நேரம் எடுக்கின்றன என்பதை நீங்கள் துல்லியமாகக் கண்டறியலாம். எடுத்துக்காட்டாக, domainLookupEnd - domainLookupStart அதிகமாக இருந்தால், அது ஒரு DNS தீர்வு சிக்கலைக் குறிக்கிறது. responseEnd - responseStart அதிகமாக இருந்தால், அது மெதுவான சர்வர் மறுமொழி நேரத்தையோ அல்லது பெரிய உள்ளடக்க அளவையோ సూచిస్తుంది.

உதாரணம்: வட அமெரிக்காவில் உள்ள பயனர்களுடன் ஒப்பிடும்போது தென் அமெரிக்காவில் உள்ள பயனர்களுக்கு connectEnd - connectStart கணிசமாக அதிகமாக இருக்கும் ஒரு சூழ்நிலையை கற்பனை செய்து பாருங்கள். இது தென் அமெரிக்க பயனர்களுக்கு நெருக்கமான பாயிண்ட்ஸ் ஆஃப் ப்ரெசன்ஸ் (PoPs) கொண்ட CDN தேவை என்பதைக் குறிக்கலாம்.

2. சர்வர் மறுமொழி நேரத்தை (TTFB) மேம்படுத்துதல்

முதல் பைட்டிற்கான நேரம் (TTFB) என்பது உலாவி சர்வரிடமிருந்து முதல் பைட் தரவைப் பெற எடுக்கும் நேரத்தை அளவிடும் ஒரு முக்கியமான அளவீடு ஆகும். ஒரு உயர் TTFB ஒட்டுமொத்த பக்க ஏற்றுதல் நேரத்தை கணிசமாக பாதிக்கலாம்.

TTFB-ஐ மேம்படுத்துவதற்கான உத்திகள்:

• சர்வர் பக்க குறியீட்டை மேம்படுத்துதல்: HTML பதிலை உருவாக்க எடுக்கும் நேரத்தைக் குறைக்க உங்கள் சர்வர் பக்க குறியீட்டின் செயல்திறனை மேம்படுத்துங்கள். மெதுவான வினவல்கள் அல்லது திறனற்ற வழிமுறைகளைக் கண்டறிய சுயவிவரக் கருவிகளைப் பயன்படுத்தவும்.
• உள்ளடக்க விநியோக நெட்வொர்க்கை (CDN) பயன்படுத்துதல்: ஒரு CDN உங்கள் இணையதளத்தின் உள்ளடக்கத்தை கேச் செய்து உங்கள் பயனர்களுக்கு நெருக்கமான சர்வர்களில் இருந்து வழங்க முடியும், இது தாமதத்தைக் குறைத்து TTFB-ஐ மேம்படுத்துகிறது. வெவ்வேறு பிராந்தியங்களில் உள்ள பயனர்களுக்கு சேவை செய்ய வலுவான உலகளாவிய நெட்வொர்க்குகளைக் கொண்ட CDN-களைக் கவனியுங்கள்.
• HTTP கேச்சிங்கை இயக்குதல்: நிலையான சொத்துக்களை உலாவிகள் கேச் செய்ய அனுமதிக்க உங்கள் சர்வரை பொருத்தமான HTTP கேச் தலைப்புகளை அனுப்ப உள்ளமைக்கவும். இது சர்வருக்கான கோரிக்கைகளின் எண்ணிக்கையை கணிசமாகக் குறைத்து, அடுத்தடுத்த பக்க சுமைகளுக்கு TTFB-ஐ மேம்படுத்தும். உலாவி கேச்சிங்கை திறம்படப் பயன்படுத்துங்கள்.
• தரவுத்தள வினவல்களை மேம்படுத்துதல்: மெதுவான தரவுத்தள வினவல்கள் TTFB-ஐ கணிசமாக பாதிக்கலாம். குறியீடுகளைப் பயன்படுத்துவதன் மூலமும், முழு அட்டவணை ஸ்கேன்களைத் தவிர்ப்பதன் மூலமும், அடிக்கடி அணுகப்படும் தரவை கேச் செய்வதன் மூலமும் உங்கள் வினவல்களை மேம்படுத்துங்கள்.
• வேகமான வலை ஹோஸ்டைப் பயன்படுத்துதல்: உங்கள் தற்போதைய வலை ஹோஸ்ட் மெதுவாக இருந்தால், வேகமான ஒன்றிற்கு மாறுவதைக் கவனியுங்கள்.

3. வளங்கள் ஏற்றுவதை மேம்படுத்துதல்

Resource Timing API படங்கள், ஸ்கிரிப்ட்கள் மற்றும் ஸ்டைல்ஷீட்கள் போன்ற தனிப்பட்ட வளங்களின் ஏற்றுதல் நேரம் பற்றிய விரிவான தகவல்களை வழங்குகிறது. ஏற்றுவதற்கு அதிக நேரம் எடுக்கும் வளங்களைக் கண்டறிந்து அவற்றை மேம்படுத்த இந்தத் தரவைப் பயன்படுத்தவும்.

வளங்கள் ஏற்றுவதை மேம்படுத்துவதற்கான உத்திகள்:

• படங்களை சுருக்குதல்: தரத்தை தியாகம் செய்யாமல் படங்களை சுருக்க பட மேம்படுத்தல் கருவிகளைப் பயன்படுத்தவும். WebP போன்ற நவீன பட வடிவங்களைப் பயன்படுத்துவதைக் கவனியுங்கள், இது JPEG மற்றும் PNG-ஐ விட சிறந்த சுருக்கத்தை வழங்குகிறது. <picture> உறுப்பு அல்லது பதிலளிக்கக்கூடிய பட நுட்பங்களைப் பயன்படுத்தி பயனரின் சாதனம் மற்றும் திரை அளவுக்கு ஏற்ப வெவ்வேறு படத் தீர்மானங்களை வழங்கவும்.
• CSS மற்றும் ஜாவாஸ்கிரிப்டை மினிஃபை செய்தல்: உங்கள் CSS மற்றும் ஜாவாஸ்கிரிப்ட் கோப்புகளின் அளவைக் குறைக்க தேவையற்ற எழுத்துக்கள் மற்றும் வெள்ளைவெளியை அகற்றவும்.
• CSS மற்றும் ஜாவாஸ்கிரிப்ட் கோப்புகளைத் தொகுத்தல்: HTTP கோரிக்கைகளின் எண்ணிக்கையைக் குறைக்க பல CSS மற்றும் ஜாவாஸ்கிரிப்ட் கோப்புகளை குறைவான கோப்புகளாக இணைக்கவும். தொகுப்பதற்கு Webpack, Parcel, அல்லது Rollup போன்ற கருவிகளைப் பயன்படுத்தவும்.
• முக்கியமற்ற வளங்களை ஏற்றுவதை தாமதப்படுத்துதல்: சோம்பேறி ஏற்றுதல் (lazy loading) போன்ற நுட்பங்களைப் பயன்படுத்தி முக்கியமற்ற வளங்களை (எ.கா., மடிப்பிற்குக் கீழே உள்ள படங்கள்) ஒத்திசைவற்ற முறையில் ஏற்றவும்.
• நிலையான சொத்துக்களுக்கு CDN-ஐப் பயன்படுத்துதல்: ஏற்றுதல் நேரங்களை மேம்படுத்த நிலையான சொத்துக்களை (படங்கள், CSS, ஜாவாஸ்கிரிப்ட்) ஒரு CDN-இலிருந்து வழங்கவும்.
• முக்கியமான வளங்களுக்கு முன்னுரிமை அளித்தல்: பக்கத்தின் ஆரம்ப ரெண்டரிங்கை மேம்படுத்த CSS மற்றும் எழுத்துருக்கள் போன்ற முக்கியமான வளங்களை ஏற்றுவதற்கு முன்னுரிமை அளிக்க <link rel="preload"> ஐப் பயன்படுத்தவும்.

4. ரெண்டரிங்கை மேம்படுத்துதல்

பயனர் அனுபவத்தை மேம்படுத்த உங்கள் இணையதளம் ரெண்டர் செய்யும் முறையை மேம்படுத்துங்கள். First Paint (FP), First Contentful Paint (FCP), மற்றும் Largest Contentful Paint (LCP) ஆகியவை முக்கிய அளவீடுகள்.

ரெண்டரிங்கை மேம்படுத்துவதற்கான உத்திகள்:

• CSS விநியோகத்தை மேம்படுத்துதல்: ரெண்டர்-தடுப்பதைத் தடுக்கும் வகையில் CSS-ஐ வழங்கவும். ஆரம்ப வ்யூபோர்ட்டுக்குத் தேவையான CSS-ஐ இன்லைன் செய்யவும் மற்றும் மீதமுள்ள CSS-ஐ ஒத்திசைவற்ற முறையில் ஏற்றவும் கிரிட்டிகல் CSS போன்ற நுட்பங்களைப் பயன்படுத்தவும்.
• நீண்ட நேரம் இயங்கும் ஜாவாஸ்கிரிப்டைத் தவிர்த்தல்: முக்கிய த்ரெட்டைத் தடுப்பதைத் தவிர்க்க நீண்ட நேரம் இயங்கும் ஜாவாஸ்கிரிப்ட் பணிகளை சிறிய பகுதிகளாக உடைக்கவும்.
• வலைப் பணியாளர்களைப் பயன்படுத்துதல் (Web workers): முக்கிய த்ரெட்டைத் தடுப்பதைத் தவிர்க்க கணக்கீட்டு ரீதியாக தீவிரமான பணிகளை வலைப் பணியாளர்களுக்கு நகர்த்தவும்.
• ஜாவாஸ்கிரிப்ட் செயலாக்கத்தை மேம்படுத்துதல்: திறமையான ஜாவாஸ்கிரிப்ட் குறியீட்டைப் பயன்படுத்தவும் மற்றும் தேவையற்ற DOM கையாளுதல்களைத் தவிர்க்கவும். React, Vue மற்றும் Angular போன்ற Virtual DOM நூலகங்கள் DOM புதுப்பிப்புகளை மேம்படுத்த உதவும்.
• தளவமைப்பு மாற்றங்களைக் குறைத்தல்: காட்சி நிலைத்தன்மையை மேம்படுத்த எதிர்பாராத தளவமைப்பு மாற்றங்களைக் குறைக்கவும். பக்கம் ஏற்றப்படும் போது உள்ளடக்கம் குதிப்பதைத் தடுக்க படங்கள் மற்றும் விளம்பரங்களுக்கு இடத்தை ஒதுக்கவும். தளவமைப்பு மாற்றங்கள் எங்கு நிகழ்கின்றன என்பதைக் கண்டறிய Cumulative Layout Shift (CLS) அளவீட்டைப் பயன்படுத்தவும்.
• எழுத்துருக்களை மேம்படுத்துதல்: வலை எழுத்துருக்களை முன்கூட்டியே ஏற்றுவதன் மூலமும், கண்ணுக்குத் தெரியாத உரையைத் தவிர்க்க font-display: swap; ஐப் பயன்படுத்துவதன் மூலமும், எழுத்துரு கோப்பு அளவுகளைக் குறைக்க எழுத்துரு துணைக்குழுக்களைப் பயன்படுத்துவதன் மூலமும் திறமையாகப் பயன்படுத்தவும். பொருத்தமான இடங்களில் கணினி எழுத்துருக்களைப் பயன்படுத்துவதைக் கவனியுங்கள்.

5. செயல்திறனைத் தொடர்ந்து கண்காணித்தல்

இணையதள செயல்திறன் ஒரு முறை சரிசெய்வது அல்ல. புதிய இடையூறுகள் எழும் போது அவற்றைக் கண்டறிந்து சரிசெய்ய செயல்திறனைத் தொடர்ந்து கண்காணிப்பது அவசியம். காலப்போக்கில் முக்கிய அளவீடுகளைக் கண்காணிக்க செயல்திறன் கண்காணிப்புக் கருவிகளைப் பயன்படுத்தவும் மற்றும் செயல்திறன் குறையும் போது உங்களுக்குத் தெரிவிக்க விழிப்பூட்டல்களை அமைக்கவும். Google PageSpeed Insights, WebPageTest மற்றும் Lighthouse போன்ற கருவிகளைப் பயன்படுத்தி உங்கள் இணையதளத்தின் செயல்திறனைத் தவறாமல் தணிக்கை செய்யவும். வெவ்வேறு இடங்களில் உள்ள உண்மையான பயனர்களிடமிருந்து செயல்திறன் தரவைச் சேகரிக்க உண்மையான பயனர் கண்காணிப்பை (RUM) செயல்படுத்துவதைக் கவனியுங்கள்.

தனிப்பயன் அளவீடுகளுக்காக User Timing API-ஐப் பயன்படுத்துதல்

User Timing API உங்களை தனிப்பயன் செயல்திறன் அளவீடுகளை வரையறுக்கவும் மற்றும் குறிப்பிட்ட குறியீட்டுப் பிரிவுகள் செயல்படுத்த எடுக்கும் நேரத்தை அளவிடவும் அனுமதிக்கிறது. இது தனிப்பயன் கூறுகளின் செயல்திறனை அல்லது குறிப்பிட்ட பயனர் தொடர்புகளைக் கண்காணிக்க பயனுள்ளதாக இருக்கும்.

உதாரணம்: தனிப்பயன் அளவீட்டை அளவிடுதல்

// Start measuring performance.mark('start-custom-metric'); // Perform some operation // ... your code here ... // End measuring performance.mark('end-custom-metric'); // Calculate the duration performance.measure('custom-metric', 'start-custom-metric', 'end-custom-metric'); // Get the measurement const measures = performance.getEntriesByType('measure'); if (measures && measures.length > 0) { const customMetric = measures[0]; console.log('Custom Metric Duration:', customMetric.duration); }

உலகளாவிய செயல்திறன் நுண்ணறிவுகளுக்கு உண்மையான பயனர் கண்காணிப்பு (RUM)

செயற்கை சோதனை (எ.கா., Lighthouse-ஐப் பயன்படுத்துதல்) மதிப்புமிக்க நுண்ணறிவுகளை வழங்கினாலும், உண்மையான பயனர் கண்காணிப்பு (RUM) வெவ்வேறு இடங்களிலும் பல்வேறு நெட்வொர்க் நிலைமைகளின் கீழும் உங்கள் இணையதளம் உண்மையான பயனர்களுக்கு எவ்வாறு செயல்படுகிறது என்பதற்கான துல்லியமான படத்தை வழங்குகிறது. RUM பயனர்களின் உலாவிகளிலிருந்து நேரடியாக செயல்திறன் தரவைச் சேகரித்து, பக்க ஏற்றுதல் நேரம், TTFB மற்றும் பிழை விகிதங்கள் போன்ற முக்கிய அளவீடுகள் குறித்த நுண்ணறிவுகளை வழங்குகிறது. சில பயனர் பிரிவுகளுக்கு குறிப்பிட்ட செயல்திறன் சிக்கல்களைக் கண்டறிய புவியியல், சாதனம், உலாவி மற்றும் நெட்வொர்க் வகை மூலம் தரவைப் பிரிக்க உங்களை அனுமதிக்கும் RUM கருவிகளைப் பயன்படுத்துவதைக் கவனியுங்கள்.

உலகளாவிய RUM செயலாக்கத்திற்கான பரிசீலனைகள்:

• தரவு தனியுரிமை: பயனர் தரவைச் சேகரிக்கும் போது GDPR மற்றும் CCPA போன்ற தரவு தனியுரிமை விதிமுறைகளுக்கு இணங்குவதை உறுதிசெய்யவும். முடிந்தவரை முக்கியமான தரவை அநாமதேயமாக்கவும் அல்லது புனைப்பெயராக்கவும்.
• மாதிரி எடுத்தல்: சேகரிக்கப்பட்ட தரவின் அளவைக் குறைக்கவும் மற்றும் பயனர் செயல்திறன் மீதான தாக்கத்தைக் குறைக்கவும் மாதிரி எடுப்பதைப் பரிசீலிக்கவும்.
• புவியியல் பிரிவு: சில இடங்களுக்கு குறிப்பிட்ட செயல்திறன் சிக்கல்களைக் கண்டறிய உங்கள் RUM தரவை புவியியல் ரீதியாக பிரிக்கவும்.
• நெட்வொர்க் நிலைமைகள்: நெட்வொர்க் நிலைமைகள் பயனர் அனுபவத்தை எவ்வாறு பாதிக்கின்றன என்பதைப் புரிந்துகொள்ள வெவ்வேறு நெட்வொர்க் வகைகளில் (எ.கா., 3G, 4G, Wi-Fi) செயல்திறனைக் கண்காணிக்கவும்.

சரியான கருவிகளைத் தேர்ந்தெடுத்தல்

பல கருவிகள் பக்க ஏற்றுதல் அளவீடுகளை சேகரிக்கவும் பகுப்பாய்வு செய்யவும் உங்களுக்கு உதவும். சில பிரபலமான விருப்பங்கள் பின்வருமாறு:

• Google PageSpeed Insights: உங்கள் இணையதளத்தின் செயல்திறனைப் பகுப்பாய்வு செய்து மேம்படுத்துவதற்கான பரிந்துரைகளை வழங்கும் ஒரு இலவச கருவி.
• WebPageTest: வெவ்வேறு இடங்கள் மற்றும் உலாவிகளில் இருந்து உங்கள் இணையதளத்தின் செயல்திறனைச் சோதிக்க உங்களை அனுமதிக்கும் ஒரு இலவச கருவி.
• Lighthouse: உங்கள் இணையதளத்தின் செயல்திறன், அணுகல் மற்றும் SEO ஆகியவற்றைத் தணிக்கை செய்யும் ஒரு திறந்த மூலக் கருவி. இது Chrome DevTools-இல் ஒருங்கிணைக்கப்பட்டுள்ளது.
• New Relic: உங்கள் இணையதளத்தின் செயல்திறன் குறித்த நிகழ்நேர நுண்ணறிவுகளை வழங்கும் ஒரு விரிவான கண்காணிப்பு தளம்.
• Datadog: உண்மையான பயனர் கண்காணிப்பு மற்றும் செயற்கை சோதனை திறன்களை வழங்கும் ஒரு கண்காணிப்பு மற்றும் பகுப்பாய்வு தளம்.
• Sentry: செயல்திறன் சிக்கல்களைக் கண்டறிந்து சரிசெய்ய உதவும் ஒரு பிழை கண்காணிப்பு மற்றும் செயல்திறன் கண்காணிப்பு தளம்.

முடிவுரை

முகப்பு செயல்திறனை மேம்படுத்துவது என்பது தொடர்ச்சியான கண்காணிப்பு, பகுப்பாய்வு மற்றும் மேம்படுத்தல் தேவைப்படும் ஒரு தொடர்ச்சியான செயல்முறையாகும். Frontend Performance API மற்றும் பிற கருவிகளைப் பயன்படுத்துவதன் மூலம், உங்கள் இணையதளத்தின் செயல்திறன் குறித்த மதிப்புமிக்க நுண்ணறிவுகளைப் பெற்று, மேம்படுத்துவதற்கான பகுதிகளைக் கண்டறியலாம். உங்கள் பார்வையாளர்களின் உலகளாவிய தன்மையைக் கருத்தில் கொண்டு, வெவ்வேறு இடங்களிலும் மாறுபட்ட நெட்வொர்க் நிலைமைகளிலும் உள்ள பயனர்களுக்காக மேம்படுத்த நினைவில் கொள்ளுங்கள். பயனர் அனுபவத்தில் கவனம் செலுத்துவதன் மூலமும், செயல்திறனைத் தொடர்ந்து கண்காணிப்பதன் மூலமும், உங்கள் இணையதளம் உலகில் எங்கிருந்தாலும் அனைத்து பயனர்களுக்கும் வேகமான மற்றும் பதிலளிக்கக்கூடிய அனுபவத்தை வழங்குவதை உறுதிசெய்யலாம். இந்த உத்திகளைச் செயல்படுத்துவது உலகளாவிய பார்வையாளர்களுக்காக வேகமான, அதிக ஈடுபாடுள்ள மற்றும் வெற்றிகரமான இணையதளத்தை உருவாக்க உதவும்.